<template>
  <div class="resume-checked">
    <main>
      <div class="personal-info">
        <div>
          <p class="name">{{ personInfo.name }}</p>
          <p class="desc">
            <span class="icon person-state"></span>
            {{ getExpName(personInfo.status) }}<i class="inline"></i>
            <span class="icon edubg"></span>
            {{ getEduName(personInfo.edubg) }}学历<i class="inline"></i>
            <span class="icon job-status"></span>
            {{ getJobStatusName(personInfo.jobStatus) }}
          </p>
          <p class="desc">
            <span class="icon tel"></span>{{ personInfo.tel }}
          </p>
          <div class="thumb-container">
            <img class="thumb" :src="thumbUrl"/>
          </div>
        </div>
      </div>
      <div class="self-intro">
        <p class="title">自我介绍</p>
        <div style="transition:all .5s ease">
          <div
            class="self-intro-container"
            v-html="personInfo.selfIntro">
          </div>
        </div>
      </div>
      <div class="desire-job">
        <p class="title">
          期望职位
        </p>
        <div style="transition:all .5s ease">
          <div
            class="desc"
            v-for="job of personInfo.jobDesire"
            @click="modifyDesireJobInit(job)"
            :key="job.id">
            <span class="icon bulb"></span>{{ getJobTypeName(job.job) }}<i class="inline"></i>
            <span class="icon salary"></span>{{ job.salary }}<i class="inline"></i>
            <span class="icon location"></span>{{ getCityName(job.location) }}
          </div>
        </div>
      </div>
      <div class="education">
        <p class="title">
          教育经历
        </p>
        <div class="edu-container">
          <div
            class="edu"
            v-for="exp of personInfo.eduExp"
            @click="modifyEduExpInit(exp)"
            :key="exp.id">
            <p class="edu-name">
              {{ exp.name }}
            </p>
            <p><span class="date">{{ exp.start }} - {{ exp.end }}</span></p>
            <p class="edu-desc">{{ exp.major }}<i class="inline"></i>{{ getEduName(exp.edubg) }}</p>
          </div>
        </div>
      </div>
      <div class="project-exp">
        <p class="title">
          项目经历
        </p>
        <div class="project-exp-container">
          <div
            class="proj"
            v-for="proj of personInfo.projExp"
            :key="proj.id"
            @click="modifyProjInit(proj)">
            <p class="proj-name">{{ proj.name }}</p>
            <p>
              <span class="date">{{ proj.start }} 至 {{ proj.end }}</span>
            </p>
            <p class="role">
              {{ proj.companyName || '个人项目' }}<i class="inline"></i>{{ proj.role }}
            </p>
            <div class="proj-desc content" v-html="proj.desc" v-if="proj.desc"></div>
            <div class="proj-desc result" v-html="proj.res" v-if="proj.res"></div>
          </div>
        </div>
      </div>
    </main>
    <aside>
      <div class="resume">
        <p>简历附件</p>
        <ul>
          <li>
            <span style="flex:1" @click="download(personInfo.filepath)">
              <img src="https://static.zhipin.com/zhipin/v144/web/geek/images/icon-file.png">
              {{personInfo.filename}}
            </span>
          </li>
          <div class="btn primary" @click="$router.go(-1)" style="margin:10px 0">返回</div>
          <div class="btn primary" @click="dialogShow = true">分配</div>
        </ul>
      </div>
    </aside>
    <assignDialog
      @close="dialogShow = false"
      @done="assignForInterview"
      :dialogData="interviewers"
      title="分配面试官"
      :show="dialogShow"
    ></assignDialog>
  </div>
</template>
<script>
/* eslint-disable */
import Select from '@/components/select/Select';
import Option from '@/components/select/Option';
import DatePicker from '@/components/Date/index';
import api from '@/api/resume';
import api_assign from '@/api/interAssign';
import nginx from '@/assets/nginxconfig';
import assignDialog from '@/components/Dialogs/assignForInterview';

async function getInterviewers() {
  const array = [];
  const params = new URLSearchParams();
  params.append('companyId', sessionStorage.getItem('companyId'));
  const response = await api_assign.getInterviewInfoApi(params);
  const datas = response.data.data;
  for (let i = 0; i < datas.length; i += 1) {
    array.push(
      {
        name: datas[i].linkMan,
        date: datas[i].interviewDate,
        id: datas[i].businessId,
      },
    );
  }
  return array;
}

async function getInfo() {
  const cityRes = await api.getCityApi();
  const jobRes = await api.getAllTypeApi();
  const params = new URLSearchParams();
  let personInfo = null;
  let thumbUrl = null;
  params.append('userId', sessionStorage.getItem("searchUserId"));
  const response = await api.getUserInfoApi(params);
  if(response.data.code === 200) {
    let data = response.data.data;
    thumbUrl = nginx.nginxaddress + data.sysUser.remark;
    let bDirections = data.bdirections;
    let directionList = [];
    for(let i = 0 ; i < bDirections.length ; i+=1) {
      directionList.push(
        {
          id: bDirections[i].businessId,
          job: bDirections[i].jobType,
          salary: bDirections[i].minSalary + "-" + bDirections[i].maxSalary,
          location: bDirections[i].expectCity,
        },
      )
    }
    let bExperienceList = data.bexperienceList;
    let jobList = [];
    for(let i = 0 ; i < bExperienceList.length ; i+=1) {
      jobList.push(
        {
          id: bExperienceList[i].businessId,
          name:bExperienceList[i].experienceName,
          companyName: bExperienceList[i].remark,
          role: bExperienceList[i].play,
          start: bExperienceList[i].startTime.split(' ')[0],
          end: bExperienceList[i].endTime.split(' ')[0],
          desc:bExperienceList[i].description,
          res: bExperienceList[i].result,
        }
      )
    }
    let bEduBackgroundList = data.beduBackgroundList;
    let eduList = [];
    for(let i = 0 ; i < bEduBackgroundList.length ; i+=1) {
      eduList.push(
        {
          id: bEduBackgroundList[i].businessId,
          name: bEduBackgroundList[i].campusName,
          edubg: bEduBackgroundList[i].level,
          major: bEduBackgroundList[i].profession,
          start: bEduBackgroundList[i].startTime.split(' ')[0],
          end: bEduBackgroundList[i].endTime.split(' ')[0],
        }
      )
    }
    let filename,filepath;
    if(data.bcandidateFile) {
      filename = data.bcandidateFile.filename;
      filepath = data.bcandidateFile.filepath;
    }
    personInfo = {
      filepath: filepath,
      id: data.sysUser.businessId,
      thumb: data.sysUser.remark,
      filename: filename,
      name: data.sysUser.realname,
      gender: parseInt(data.bcandidate.remark),
      age: data.sysUser.age,
      status: data.bcandidate.experience,
      edubg: data.bcandidate.educated,
      jobStatus: data.bcandidate.status,
      tel: data.sysUser.phone,
      email: data.sysUser.email,
      selfIntro: data.bcandidate.evaluate,
      jobDesire: directionList,
      projExp: jobList,
      eduExp: eduList,
    }
  }
  return [personInfo, thumbUrl, cityRes, jobRes];
}

export default {
  name: 'Resume',
  beforeRouteEnter(to, from, next) {
    getInfo().then((res) => {
      getInterviewers().then((data) => {
        next((vm) => {
          vm.personInfo = {
            ...res[0],
          }
          vm.interviewers = [...data];
          vm.thumbUrl = res[1];
          const datas1 = res[3].data.data;
          for (let i = 0; i < datas1.length; i += 1) {
            vm.workTypeList.push(
              {
                key: datas1[i].businessId,
                value: datas1[i].name,
              },
            );
          }
          const datas2 = res[2].data.data;
          for (let i = 0; i < datas2.length; i += 1) {
            vm.cityList.push(
              {
                key: datas2[i].businessId,
                value: datas2[i].name,
              },
            );
          }
        });
      });
    });
  },
  data() {
    return {
      personInfo: {
      },
      interviewers: [],
      dialogShow: false,
      thumbUrl: '/static/img/thumb1.a0e2b6e.jpg',
      cityList:[],
      workTypeList:[],
    };
  },
  methods: {
    download(path) {
      window.location.href = `http://123.206.41.36:8080/auth/download?filepath=${path}`;
    },
    getCityName(p) {
      for(let i = 0 ; i < this.cityList.length ;i ++) {
        if(p === this.cityList[i].key) {
          return this.cityList[i].value;
        }
      }
      return p;
    },
    getJobTypeName(p) {
      for(let i = 0 ; i < this.workTypeList.length ;i ++) {
        if(p === this.workTypeList[i].key) {
          return this.workTypeList[i].value;
        }
      }
      return p;
    },
    getEduName(p) {
      switch (p) {
        case '0':
          return '小学';
        case '1':
          return '初中';
        case '2':
          return '高中';
        case '3':
          return '大专';
        case '4':
          return '本科';
        case '5':
          return '研究生';
        case '6':
          return '博士'
      }
    },
    getJobStatusName(p) {
      switch (p) {
        case '0':
          return '在职-考虑机会';
        case '1':
          return '在职-月内到岗';
        case '2':
          return '离职-随时到岗';
      }
    },
    getExpName(p) {
      switch (p) {
        case '0':
          return '应届生';
        case '1':
          return '一年工作经验';
        case '2':
          return '两年工作经验';
        case '3':
          return '五年工作经验';
        case '4':
          return '十年以上工作经验';
      }
    },
    async assignForInterview(id) {
      const params = new URLSearchParams();
      params.append('interviewId', id);
      params.append('deliveryId', this.$route.query.deliverId);
      const response = await api_assign.dispatcherInterview(params);
      if (response.data.code === 200) {
        this.$alert('分配成功！');
        this.$router.go(-1);
      } else {
        this.$alert(response.data.message);
      }
    },
  },
  components: {
    Select,
    Option,
    DatePicker,
    assignDialog,
  },
};
</script>
<style lang="less">
@import url(../../../../static/style/site.vars.less);
.resume-checked {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 10px;
  width: 1200px;
  margin: 0 auto;
  &>main {
    width: 80%;
    background: #fff;
    margin-right: 10px;
    padding: 20px 0;
    box-sizing: border-box;
    margin-bottom: 60px;
    .title {
      padding-left: 10px;
      font-size: 16px;
      border-top: 1px solid rgba(211, 211, 211, 0.342);
      padding-top: 10px;
      position: relative;
      margin-right: 60px;
      &::before {
        content: "";
        position: absolute;
        width: 3px;
        height: 15px;
        border-radius: 10px;
        background-color: @site-main;
        left: 0;
        top: 13.5px;
      }
    }
    .desc {
      font-size: 14px;
      margin-bottom: 16px;
      display: flex;
      position: relative;
    }
    .personal-info {
      position: relative;
      padding: 0 30px;
      .name {
        font-size: 27px;
        margin-bottom: 20px;
        font-weight: 400;
      }
      .thumb-container {
        width: 80px;
        position: absolute;
        top: 0;
        right: 50px;
        border-radius: 80px;
        .thumb {
          width: 100%;
          border-radius: 100px;
        }
        .upload-layer {
          position: absolute;
          top: 0px;
          width: 80px;
          height: 80px;
          border-radius: 100px;
          a {
            display: block;
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .self-intro {
      padding: 0 30px;
      .self-intro-container {
        padding: 1px 10px;
        margin: 13px 0;
        &>p {
          font-size: 14px;
          margin: 10px 0;
          line-height: 27px;
          color: rgb(122, 131, 138);
        }
      }
    }
    .desire-job {
      padding-bottom: 10px;
      padding: 0 30px;
      .title {
        margin-bottom: 15px;
      }
      .desc {
        padding: 10px;
        margin: 0;
        position: relative;
      }
    }
    .project-exp {
      padding-bottom: 10px;
      padding: 0 30px;
      .project-exp-container {
        padding-top: 15px;
        transition: all .5s ease;
        .proj {
          padding: 10px;
          position: relative;
          border-bottom: 1px solid rgb(230, 230, 230);
          margin-right: 60px;
          &:last-child {
            border-bottom: 0;
          }
          .proj-name {
            margin-bottom: 10px;
            color: @site-main;
          }
          .date {
            position: relative;
            top: -10px;
            font-size: 12px;
            color: rgb(143, 143, 143);
          }
          .role {
            font-size: 14px;

          }
          .proj-desc {
            margin-top: 30px;
            position: relative;
            &.content::before {
              content: '内容 :';
              position: absolute;
              top: -20px;
              font-size: 14px;
              color: @site-main;
            }
            &.result::before {
              content: '成果 :';
              position: absolute;
              top: -20px;
              font-size: 14px;
              color: @site-main;
            }
            p {
              font-size: 14px;
              margin: 10px 0;
              margin: 10px 0;
              color: rgb(122, 131, 138);
            }
          }
        }
      }
    }
    .education {
      padding-bottom: 10px;
      padding: 0 30px;
      .edu-container {
        padding-top: 15px;
        transition: all .5s ease;
        .edu {
          padding: 10px;
          position: relative;
          .edu-name {
            margin-bottom: 10px;
          }
          .date {
            position: relative;
            top: -10px;
            font-size: 12px;
            color: rgb(143, 143, 143);
          }
          .edu-desc {
            display: flex;
          }
        }
      }
    }
    .form-container {
      background: rgba(214, 214, 214, 0.171);
      padding: 30px 80px;
      width: calc(100% + 60px);
      position: relative;
      box-sizing: border-box;
      left: -30px;
      .form-title {
        font-size: 18px;
        margin-bottom: 10px;
      }
      .checkbox-box {
        height: 35px;
        width: 45%;
        box-sizing: border-box;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #D1D1D1;
        background: #fff;
        &.chosen {
          color: rgb(23, 116, 223);
          border-color: rgb(78, 138, 207);
          box-shadow: 0 0 2px rgb(78, 138, 207);
        }
      }
      .editor {
        height: 200px;
        background: #fff;
        box-sizing: border-box;
        .ql-container {
          height: calc(100% - 42px);
        }
      }
      input.short {
        width: 45%;
      }
      footer {
        margin-top: 15px;
        text-align: right;
      }
      .select {
        height: 35px;
      }
      .text-container {
        &>p{
          margin-bottom: 5px;
        }
        margin-top: 20px;
        padding-right: 40px;
      }
    }
  }
  &>aside{
    width: 20%;
    height: 100%;
    position: sticky;
    top: 0px;
    .resume {
      background: #fff;
      padding: 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .btn.primary {
        display: block;
        width: 100%;
      }
      label {
        display: block;
        width: 100%;
      }
      &>p {
        margin-bottom: 10px;
      }
      &>ul {
        margin-bottom: 10px;
        box-sizing: border-box;
        width: 100%;
        li {
          margin-left: 0;
          box-sizing: border-box;
          padding: 10px;
          display: flex;
          justify-content: left;
          align-items: center;
          width: 100%;
          cursor: pointer;
          font-size: 14px;
          .delete {
            font-size: 12px;
            display: block;
            user-select: none;
            &:hover {
              color: @site-main;
            }
          }
          &:hover {
            background: rgb(240, 240, 240)
          }
          &>img {
            margin-right: 5px;
          }
        }
      }
    }
  }
  .inline {
    display: inline-block;
    width: 1px;
    height: 20px;
    vertical-align: middle;
    background: #e0e0e0;
    margin: 0 13px;
  }
  .icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    position: relative;
  }
  .person-state {
    background: url(../../../assets/img/resume/user.png) center center no-repeat;
    background-size: 20px 20px;
    top: -1px;
  }
  .edubg {
    background: url(../../../assets/img/resume/idcard.png) center center no-repeat;
    background-size: 20px 20px;
  }
  .job-status {
    background: url(../../../assets/img/resume/compass.png) center center no-repeat;
    background-size: 20px 20px;
  }
  .tel {
    background: url(../../../assets/img/resume/phone.png) center center no-repeat;
    background-size: 20px 20px;
    margin-right: 9px;
    top: -2px;
  }
  .bulb {
    background: url(../../../assets/img/resume/bulb.png) center center no-repeat;
    background-size: 20px 20px;
  }
  .salary {
    background: url(../../../assets/img/resume/accountbook.png) center center no-repeat;
    background-size: 20px 20px;
  }
  .location {
    background: url(../../../assets/img/resume/location.png) center center no-repeat;
    background-size: 20px 20px;
  }
  .separator {
    position: absolute;
    left: 368px;
    top: 60px;
    user-select: none;
  }
  li {
    font-size: 12px;
    margin: 0px 25px;
    line-height: 27px;
    color: rgb(122, 131, 138);
  }
}
</style>
